<template>
  <li class="menu-bar-item" v-bind:calss="menuBarItem.className">
    <div class="menu-bar-item-container" v-bind:class="{active: isActive}" @click="handleItemClick" @mouseenter="handleItemMouseEnter">
      {{menuBarItem.name}}
    </div>
    <MyMenu v-if="isActive" v-bind:items="menuBarItem.items" v-bind:classObject="menuClass" @mydeactivate="handleDeactivate"
    />
  </li>
</template>

<script>
  import Emitter from '../../mixins/emitter'
  import MyMenu from '../menu'

  export default {
    name: 'MenuBarItem',
    componentName: 'MenuBarItem',
    components: {
      MyMenu
    },
    mixins: [Emitter],
    props: {
      menuBarItem: {
        required: true
      },
      index: Number,
      isActive: Boolean,
      shouldHoverToggleActive: Boolean
    },
    computed: {
      menuClass: function () {
        let classObject = {
          'top-down': true,
          'to-right': true,
          active: this.isActive
        }
        return classObject
      }
    },
    methods: {
      handleItemClick: function (event) {
        event.stopPropagation()
        this.dispatch('MenuBar', 'itemClick', { itemIndex: this.index, isTogglingEnabled: true })
        if (this.menuBarItem.onOpen) {
          if (!this.isActive) {
            this.menuBarItem.onOpen()
          }
        }
      },
      handleItemMouseEnter: function () {
        if (this.shouldHoverToggleActive) {
          this.dispatch('MenuBar', 'itemClick', { itemIndex: this.index })
        }
      },
      handleDeactivate: function () {
        this.dispatch('MenuBar', 'itemClick', { itemIndex: -1 })
      }
    }
  }

</script>
